@import '../common-functions.less';

.aj-carousel-base {
    overflow: hidden;

    header ul {
        overflow: hidden;

        li {
            float     : left;
            text-align: center;
            cursor    : pointer;
        }
    }

    &>div {
        white-space: nowrap;
        .fixTransitionFlash;
        .leftFx;
        transition: transform 400ms linear;

        &>div {
            white-space: normal;
            float      : left;
            min-height : 10px;
        }
    }
}

.aj-carousel {
    .aj-carousel-base;
    margin   : 0 auto;
    width    : 100%;
    max-width: 700px;

    &>div>div {
        overflow  : hidden;
        padding   : 10px;
        box-sizing: border-box;
    }

    &.aj-carousel-tab {
        &>div>div {
            background-color: #E7E7E7;
        }

        header li {
            border-top: 3px solid transparent;

            &.active {
                border-color    : #0084C9 #9A9A9A #9A9A9A;
                border-top-color: #0084C9;
                color           : #0084C9;
                background-color: #E7E7E7;
            }
        }
    }

    &.aj-banner {
        position  : relative;
        overflow  : hidden;
        min-height: 140px;
        max-height: 480px;

        &>div>div {
            padding: 0;

            img {
                width: 100%;
            }
        }

        header {
            position: absolute;
            bottom  : 0;
            left    : 0;
            width   : 100%;
            z-index : 99999;

            li {
                background-color: rgba(0, 0, 0, 0.5);
                width           : 100%;
                height          : 25px;
                color           : white;
                letter-spacing  : 3px;
            }
        }

        ol {
            background : -webkit-gradient(linear, 100% 0, 200 0, from(#222), to(rgba(0, 0, 0, 0)));
            width      : 100%;
            margin     : 0;
            padding    : 0;
            height     : 18px;
            line-height: 25px;
            position   : absolute;
            bottom     : 0;
            left       : 0;
            text-align : right;

            li {
                list-style-type: none;
                height         : 5px;
                width          : 5px;
                display        : inline-block;
                margin         : 6px 3px;
                color          : white;
                text-indent    : 99em;
                background     : rgba(255, 255, 255, .5);
                cursor         : pointer;
                border-radius  : 50%;

                &:last-child {}

                &.active {
                    background: white;
                }
            }
        }
    }
}

@media screen and (min-width: 330px) {
    aj-banner {
        max-height: 180px;
    }
}

@media screen and (min-width: 480px) {
    .aj-banner {
        //		max-height: 280px;
    }
}